<template>
	<NavBar :obj="{ title: init.title, color: '#000', backgroundColor: '#fff' }" />
	<view class="container">
		<view class="title"></view>

		<view class="main">
			<u-row class="main_li">
				<u-col span="3">转账账户</u-col>
				<u-col span="9" class="bank" @click="init.accountShow = true">
					<view :class="{ black: init.currTitle }">
						{{ init.currTitle != '' ? init.currTitle : '请选择转账账户' }}
					</view>
					<view><u-icon name="arrow-down" color="#333" size="16" class="arrow-down"></u-icon></view>
				</u-col>
			</u-row>
			<u-row class="main_li">
				<u-col span="3">对方账户</u-col>
				<view class="flex-1">
					<input type="text" v-model="init.formData.take" placeholder="请填写对方账户" class="inp" placeholder-class="place-inp" @blur="takeBlur" />
				</view>
			</u-row>
			<u-row class="main_li" v-if="init.takeUser">
				<u-col span="3">对方姓名</u-col>
				<view class="flex-1">
					<input type="text" v-model="init.takeUser" :disabled="true" class="inp" placeholder-class="place-inp" />
				</view>
			</u-row>
			<u-row class="main_li">
				<u-col span="3">转账金额</u-col>
				<view class="flex-1">
					<InputAmount v-model="init.formData.amount" customClass="inp" placeholder="请填写转账金额" />
					<!-- <input type="number" v-model="init.formRef.amount" placeholder="请填写转账金额" class="inp" placeholder-class="place-inp" @input="amountInput" /> -->
				</view>
			</u-row>
		</view>

		<view class="balance" v-if="init.currBalance">
			当前账户可用：
			<text>{{ init.currBalance }}</text>
		</view>

		<view class="desc">
			<rich-text :nodes="init.info.factor?.transfer_msg"></rich-text>
		</view>

		<view class="confirm" @click="submit">确认</view>

		<view class="record flex items-center justify-center" @click="goUrl('/pages/transfer/record')">
			转账记录
			<up-icon name="arrow-right-double" :color="theme?.themeColor" class="icon"></up-icon>
		</view>
		<up-picker
			:show="init.accountShow"
			:columns="[init.info.account]"
			@cancel="init.accountShow = false"
			@confirm="confirmAccount"
			keyName="title"
			valueName="type"
			:confirmColor="theme?.themeColor"
		></up-picker>

		<Password v-model:show="init.passwordShow" @confirm="confirm" />
	</view>
</template>

<script setup>
	import { ref, nextTick, watch } from 'vue';
	import { port, goUrl, imgUrl, hint, goBack, loading, closeLoading } from '/service/port';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import Password from '/components/Password.vue';
	import InputAmount from '/components/InputAmount.vue';
	import { useThemeStore } from '@/stores/theme';

	const theme = useThemeStore();

	const init = ref({
		info: {},
		accountShow: false,
		passwordShow: false,
		currTitle: '',
		currBalance: '',
		title: '',
		takeUser: '',
		formData: {
			account: '',
			take: '',
			amount: '',
			pay_password: ''
		}
	});

	const confirmAccount = (e) => {
		init.value.formData.account = e.value[0].type;
		init.value.currTitle = e.value[0].title;
		init.value.currBalance = e.value[0].balance;
		init.value.accountShow = false;
	};
	const takeBlur = (e) => {
		if (e.detail.value) {
			port('inquiryUser', { type: 'code', code: e.detail.value })
				.then((e) => {
					init.value.takeUser = e.data.nickname;
				})
				.catch((e) => {
					init.value.takeUser = '';
				});
		}
	};

	onLoad((e) => {
		init.value.title = e.title ? e.title : '';
	});

	onShow(() => {
		reload();
		getTransfer();
	});

	async function getTransfer() {
		let res = await port('getTransfer');
		init.value.info = res.data;
		init.value.formData.account = res.data.account[0].type;
	}

	async function submit() {
		if (!init.value.formData.take) {
			hint('请填写对方账户');
			return false;
		}
		if (!init.value.formData.amount) {
			hint('请填写转账金额');
			return false;
		}
		init.value.passwordShow = true;
	}

	async function confirm(e) {
		init.value.formData.pay_password = e;
		init.value.passwordShow = false;
		loading();
		let res = await port('saveTransfer', init.value.formData);

		setTimeout(() => {
			closeLoading();
			hint(res.msg);
			reload();
			goUrl('/pages/transfer/record');
		}, 200);
	}

	function reload() {
		init.value.formData = {
			account: '',
			take: '',
			amount: '',
			pay_password: ''
		};
		init.value.takeUser = '';
		init.value.currTitle = '';
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}
	::v-deep {
		.u-upload__button {
			margin: 0;
		}
	}

	.balance {
		margin: 10rpx;
		color: #828282;
		font-size: 25rpx;
		> text {
			color: #f79904;
			font-size: 30rpx;
		}
	}

	.black {
		color: #000 !important;
	}
	.inp {
		color: #000 !important;
	}
	.place-inp {
		color: #bdbdbd;
	}
	.desc {
		margin: 50rpx 10rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		word-break: break-all;
	}

	.container {
		margin: 0 30upx;
		.title {
			margin-top: 44upx;
			color: #666;
			font-size: 26upx;
		}
		.main {
			background: #fff;
			border-radius: 20upx;
			// margin-top: 30upx;
			.main_li:last-child {
				border-bottom: none !important;
			}
			.main_li {
				padding: 30rpx 0;
				color: #000;
				font-size: 28upx;
				display: flex;
				flex: 1 2 0%;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1upx solid #eee;
				view {
					color: #000;
					display: flex;
					text-align: left;
					font-size: 28upx;
					input {
						width: 100%;
						font-size: 28upx;
					}
				}
				.bank {
					display: flex;
					justify-content: space-between !important;
					align-items: center;
					view {
						color: #bdbdbd;
					}
				}
				view:last-child {
					color: #bdbdbd;
				}
			}
		}
		.confirm {
			margin-top: 86upx;
			color: #fff;
			background: $theme-bg-btn-color;
			text-align: center;
			line-height: 88upx;
			border-radius: 88upx;
		}
	}
	.record {
		color: $theme-color;
		font-size: 26rpx;
		margin: 50rpx;
		.icon {
			margin-top: 5rpx;
			margin-left: 8rpx;
		}
	}
</style>
